<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>layout 后台大布局 - Layui</title>
    <link rel="stylesheet" href="/static/layui/css/layui.css">
</head>

<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">


    <div class="layui-body">
        <form class="layui-form" action="" lay-filter="filter">
            <div class="layui-form-item">
                <label class="layui-form-label">姓名</label>
                <div class="layui-input-inline ">
                    <input type="text" name="name" required lay-verify="required" placeholder="请输入标题"
                           value="${(theOne.name)!}" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">账号</label>
                <div class="layui-input-inline ">
                    <input type="text" name="username" required lay-verify="required" placeholder="请输入标题"
                           value="${(theOne.username)!}"autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">密码</label>
                <div class="layui-input-inline">
                    <input type="password" name="password" required lay-verify="required" placeholder="请输入密码"
                           value="${(theOne.password)!}"autocomplete="off" class="layui-input">
                </div>
                <div class="layui-form-mid layui-word-aux">辅助文字</div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label" >职位</label>
                <div class="layui-input-inline">
                    <#if (theOne.position)??>
                    <select name="position" id = "select" lay-verify="required">
                        <option value="0"  <#if theOne.position == 0>selected</#if>>开发岗位</option>
                        <option value="1"  <#if theOne.position == 1>selected</#if>>测试工程师</option>
                        <option value="2"  <#if theOne.position == 2>selected</#if>>前端开发</option>
                        <option value="3"  <#if theOne.position == 3>selected</#if>>部门主管</option>
                        <option value="4"  <#if theOne.position == 4>selected</#if>>行政</option>
                    </select>
                    <#else>
                    <select name="position" id = "select" lay-verify="required">
                        <option value="0">开发岗位</option>
                        <option value="1">测试工程师</option>
                        <option value="2">前端开发</option>
                        <option value="3">部门主管</option>
                        <option value="4">行政</option>
                    </select>
                </#if>
                </div>

            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">性别</label>
                <div class="layui-input-block" >
                    <#if (theOne.gender)??>
                        <input type="radio" name="gender"  id="man" value="1" title="男"  <#if theOne.gender == 1>checked</#if> >
                        <input type="radio" name="gender" id="women" value="0" title="女"  <#if theOne.gender == 0>checked</#if>>
                    <#else>
                        <input type="radio" name="gender"  id="man" value="1" title="男">
                        <input type="radio" name="gender" id="women" value="0" title="女">
                    </#if>

                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">设置状态</label>
                <div class="layui-input-inline">
                    <#if (theOne.type)??>
                    <select name="type" id = "type" lay-verify="required" >
                        <option value="0" <#if theOne.type == 0>selected</#if> >员工</option>
                        <option value="1" <#if theOne.type == 1>selected</#if>>管理员</option>
                    </select>
                    <#else>
                    <select name="type" id = "type" lay-verify="required" >
                        <option value="0"  >员工</option>
                        <option value="1" >管理员</option>
                    </select>
                </#if>
                </div>
                <input type="hidden" id = "position"value="${(theOne.position)!}">
                <input type="hidden" id = "hiddenType"value="${(theOne.type)!}">
                <input type="hidden" name = "id" value="${(theOne.id)!}">
                <input type="hidden" id = "hiddenGender" value="${(theOne.gender)!}">
            </div>
            <div  class="layui-form-item  layui-footer" style="background-color: #fff">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit lay-filter="formSub">立即提交</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
        </form>
        <script src="/static/layui/layui.js"></script>
        <script>
            //Demo
            layui.use(['form','jquery'], function () {
                var form = layui.form;
                var $ = layui.$;
                var position = $("#position").val();
                var type = $("#hiddenType").val();

                $(document).ready(function () {
                    //预加载
                    });
                form.render();
                //监听提交
                form.on('submit(formSub)', function (data) {
                   /* layer.msg(JSON.stringify(data.field));*/
                    $.ajax({
                        url:'/save',
                        method:'post',
                        data:data.field,
                        success:function(data){
                            if(data.code==0){
                                parent.layer.msg("操作成功!", {time: 500}, function () {
                                    //重新加载父页面
                                    parent.location.reload();
                                });
                                return;
                            }else {
                                layer.alert("操作失败")
                            }
                        },
                        error:function () {
                            layer.alert("请求失败")
                        }
                    }) ;
                    return false;
                });
            });
        </script>
    </div>
</div>
</body>

</html>